<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml" layout:decorate="~{layout/template}">
<head>
    <meta charset="utf-8">
    <title>导出office文档示例</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<body>
<div id="contentContainer" layout:fragment="content" class="contentContainer" v-cloak>
    <el-button @click.native="onExportWord">导出word文档</el-button>
    <el-button @click.native="onExportExcel">导出excel文档</el-button>
</div>
<th:block layout:fragment="staticFile">
    <script type="text/javascript">
        var vm = new Vue({
            el: '#contentContainer',
            methods: {
                onExportWord: function () {
                    var a = document.createElement('a');
                    var url = '/demo/exportWord';
                    a.href = url;
                    a.click();
                },
                onExportExcel: function () {
                    var a = document.createElement('a');
                    var url = '/demo/exportExcel';
                    a.href = url;
                    a.click();
                },
            }
        });
    </script>
</th:block>
</body>
</html>